<template>
  <div class="page" id="modalId">
    <n-space :size="16">
      <n-button type="primary" @click="() => (show = true)">打开{{ show }}</n-button>
      <n-button @click="() => (show = false)">关闭</n-button>
    </n-space>

    <!-- 声明式弹窗 -->
    <BasicModal v-model:show="show" :title="'xxxx企业'" style="width: 600px">
      <template #content>
        <ExampleForm style="width: 100%"></ExampleForm>
      </template>
    </BasicModal>

    <!-- 命令式弹窗 -->
    <n-button @click="openModal">打开modal</n-button>
  </div>
</template>

<script setup lang="ts">
import useCommandComponent from '@/hooks/useCommandComponent'

import commandTestModal from './commandTestModal.vue'

provide('testProvide', 'cccs')
const show = ref(false)
const modalInstance = useCommandComponent(commandTestModal)
function modalCloseCallback() {
  console.log('弹窗关闭了')
}
function openModal() {
  modalInstance({ onClose: modalCloseCallback, to: '#modalId' })
}

window.$notification.info({ content: 'aaa', duration: 1000 })
</script>

<style lang="less" scoped>
.page {
  width: 1200px;
  margin: auto;
}
</style>
@/hooks/useCommandComponent
